<template>
  <div>
    <h1 align="center">门店列表</h1>
    门店名称:
    <input type="text" v-model="state.mname">
    门店状态:
    <input type="text" v-model="state.msate">
    <input type="button" value="查询" @click="Show">
    <input type="button" value="门店新增" @click="zeng">
    <table class="table table-bordered">
      <tr>
        <td>门店名称</td>
        <td>门店地址</td>
        <td>门店图片</td>
        <td>客服手机号</td>
        <td>门店介绍</td>
        <td>入住须知</td>
        <td>入住信息</td>
        <td>门店状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{item.m_name}}</td>
        <td>{{item.m_dizhi}}</td>
        <td>
          <img :src="'https://localhost:7099'+item.m_photot" height="60" width="60">
        </td>
        <td>{{item.m_phone}}</td>
        <td>{{item.m_desc}}</td>
        <td>{{item.m_xuzhi}}</td>
        <td>{{item.m_messs}}</td>
        <td>{{item.m_sate==1?'开启':'停用'}}</td>
        <td>
          <input type="button" value="修改" @click="okupdate()">
          <input type="button" v-if="item.m_sate==1" value="状态更迭" @click="oksate(item.mid,item.m_sate)">
          <input type="button" v-if="item.m_sate==0" value="状态更迭" @click="oksate(item.mid,item.m_sate)">
        </td>
      </tr>
    </table>
    <div>
      <span>总页数:<b style="color: red;">{{totaPage}}</b></span>
      <span>总条数:<b style="color: red;">{{totaCount}}</b></span>
      <span>当前:<b style="color: red;">{{state.PageIndex}}/{{totaPage}}</b>页</span>
      <input type="button" value="首页" @click="goPage('home')">
      <input type="button" value="上一页" @click="goPage('prve')">
      <input type="button" value="下一页" @click="goPage('next')">
      <input type="button" value="尾页" @click="goPage('end')">
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
let data: any = reactive({
  state: {
    mname:'',
    msate:0,
    PageIndex:1,
    PageSize:3
  },
  list:[],
  totaPage:0,
  totaCount:0,
});
let { state,list,totaPage,totaCount } = toRefs(data);
//分页
const goPage=(str:any)=>{
  switch (str) {
    case 'home':
      if (state.value.PageIndex==1) {
        alert("已经首页了")
        state.value.PageIndex==1
        return;
      }
      state.value.PageIndex=1
      break;
      case 'prve':
      if (state.value.PageIndex==1) {
        alert("已经不能上一页了")
        state.value.PageIndex==1
        return;
      }
      state.value.PageIndex--
      break;
      case 'next':
      if (state.value.PageIndex==totaPage.value) {
        alert("已经不能上一页了")
        state.value.PageIndex==totaPage.value
        return;
      }
      state.value.PageIndex++
      break;
      case 'end':
      if (state.value.PageIndex==totaPage.value) {
        alert("已经尾页了")
        state.value.PageIndex==totaPage.value
        return;
      }
      state.value.PageIndex=totaPage.value
      break;
  }
  Show();
}
//新增
const zeng=()=>{
  router.push("/madd")
}
//跳转修改
const okupdate=()=>{
  router.push("/mupdate")
}
//状态更迭
const oksate=(mid:any,sate:any)=>{
   if (sate==1) {
    sate=0
   }
   else
   {
    sate=1
   }
   let obj = {
    mid:mid,
    sate:sate
   }
   axios({
     url:'/api/Member/delsate',
     method:'get',
     params:obj
   })
   .then(res=>{
    console.log(res)
    if (res.data.data==1) {
      Show();
    }else{
      alert("失败了");
      return;
    }
   })
   .catch(err=>{
    console.log(err)
   })


}


onMounted(()=>{
  Show();
})
//门店显示
const Show = () => {
  let obj = {
    mname:state.value.mname,
    msate:state.value.msate,
    PageIndex:state.value.PageIndex,
    PageSize:state.value.PageSize
  };
  axios({
    url: '/api/Member/Mshow',
    method: 'get',
    params: obj
  })
    .then((res) => {
      console.log(res);
      list.value=res.data.data
      totaPage.value=res.data.totaPage
      totaCount.value=res.data.totaCount
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
